<template>
<div div class="main">
  <router-link to="/login">
    <div class="header">
      <img class="not-login-avatar" src="@/assets/img/头像.png" alt="">
      <span class="not-login">未登录</span>
    </div>
  </router-link>
  <div class="personal-container">
    <div class="my-collect">
      <img class="collect-img" src="@/assets/img/收藏.png" alt="">
      <span class="collect-title">我的收藏</span>
    </div>
    <div class="my-browse"  @click="$router.push({ name: 'personal' })" >
      <img class="history-img" src="@/assets/img/个人中心.png"/>
      <span class="history-title">个人信息</span>
    </div>
  </div>
  <div class="order-serve" style="margin-top: 54px;">
    <div class="order-title">农户服务</div>
    <div class="serve-container">
      <div class="order-item" @click="$router.push({ name: 'farmerApply' })">
        <img class="item-img" src="@/assets/img/申请.png" />
        <div class="item-text">农户申请</div>
      </div>
      <div class="order-item"  @click="$router.push({ name: 'farmerAudit' })">
        <img class="item-img" src="@/assets/img/审核.png" />
        <div class="item-text">审核详情</div>
      </div>
      <div class="order-item"  @click="$router.push({ name: 'product' })">
        <img class="item-img" src="@/assets/img/产 品.png" />
        <div class="item-text">我的产品</div>
      </div>
      <div class="order-item"  @click="$router.push({ name: 'myAssociation' })">
        <img class="item-img" src="@/assets/img/信息.png" />
        <div class="item-text">我的协会</div>
      </div>
    </div>
  </div>
  <div class="order-serve" style="margin-top: 15px;">
    <div class="order-title">其他服务</div>
    <div class="serve-container">
      <div class="order-item">
        <img class="item-img" src="@/assets/img/设 置.png" />
        <div class="item-text">设置</div>
      </div>
      <div class="order-item">
        <img class="item-img" src="@/assets/img/我们.png" />
        <div class="item-text">关于我们</div>
      </div>
      <div class="order-item">
        <img class="item-img" src="@/assets/img/联系.png" />
        <div class="item-text">联系客服</div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: "Main"
}
</script>

<style scoped>
.main {
  display: flex;
  flex-direction: column
}

.header {
  position: relative;
  width: 375px;
  height: 150px;
  background: linear-gradient(0deg, rgba(194, 228, 253, 0) 0%, #dcfad6 56%, #c2f3c9 100%);
}

.not-login-avatar {
  position: absolute;
  left: 16px;
  top: 16px;
  width: 88px;
  height: 88px;
  border-radius: 50%;

}

.not-login {
  position: absolute;
  left: 114px;
  top: 50px;
  font-size: 17px;
  font-weight: bold;
  color: #FFFFFF;
  line-height: 17px;
}

.personal-container {
  align-self: center;
  position: absolute;
  top: 125px;
  display: flex;
  align-items: center;
  width: 335px;
  height: 60px;
  background: #FFFFFF;
  box-shadow: 0px 1px 5px 0px #DADFE1;
  border-radius: 8px;
}

.my-collect,
.my-browse {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  height: 20px;
  font-size: 13px;
  font-weight: 500;
  color: #222222;
}

.my-collect {
  border-right: 1px solid #CCCCCC;
}

.collect-img,
.history-img {
  width: 24px;
  height: 24px;
  margin-right: 12px;
}

.order-serve {
  position: relative;
  align-self: center;
  width: 335px;
  height: 126px;
  background: #FFFFFF;
  box-shadow: 0px 1px 5px 0px #DADFE1;
  border-radius: 8px;
}

.order-title {
  position: absolute;
  top: 12px;
  left: 15px;
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: bold;
  line-height: 17px;
  color: #6A6F7A;
}

.serve-container {
  display: flex;
  margin-top: 55px;
}

.order-item {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #FFFFFF;
}

.item-img {
  width: 24px;
  height: 24px;
}

.item-text {
  font-size: 13px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #666666;
  margin-top: 11px;
}
</style>
